<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <h1>注册</h1>
    <form method="post">
        <!--@blur="函数" 添加失去焦点事件，也就是当输入时的闪烁光标消失的事件-->
       用户名:<input type="text" name="username" placeholder="用户名"
                  @blur="check()">{{info}}<br>
        密码:<input type="password" name="password" placeholder="密码"><br>
        昵称:<input type="text" name="nick" placeholder="昵称"><br>
        年龄:<input type="text" name="age" placeholder="年龄"><br>
        <input type="button" value="注册" @click="reg()">
    </form>
   <!--引入axios和vue-->
   <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.14/vue.js"></script>

    <script>
        let v = new Vue({
            el:"form",
            data:{
                info:""
            },
            methods:{
                reg:function () {
                    //创建一个数据表单对象，并使用文档对象将form表单选中
                    //这种写法会自动将表单中的参数装入数据表单对象data里面
                    let data = new FormData(document.querySelector("form"));
                   axios.post("/reg",data).then(function (response) {
                       alert(response.data);
                   })
                },
                check:function () {
                    //发起异步请求，判断用户名是否可用
                    let data = new FormData(document.querySelector("form"));
                    axios.post("/check",data).then(function (response){
                       if(response.data==1){
                           v.info = "用户名可用";
                       }else {
                           v.info = "用户名已存在!";
                       }
                    })
                }
            }
        })
    </script>

</body>
</html>